<template>
  <div class="user-menu">
    <el-row class="tac">
      <el-col>
        <el-menu
          :default-active="$store.state.activePage"
          class="el-menu-vertical-demo"
          :default-openeds="['1', '2', '3', '4']"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-user"></i>
              <span>个人中心</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/user/portal" @click="routerTo('/user')">
                我的个人中心
              </el-menu-item>
              <el-menu-item
                index="/user/favorite"
                @click="routerTo('/user/favorite')"
              >
                我的收藏
              </el-menu-item>
              <!-- <el-menu-item index="/cart" @click="routerTo('/cart')">
                购物车
              </el-menu-item> -->
              <!-- <el-menu-item index="1-4">优惠券</el-menu-item> -->
              <el-menu-item
                index="/user/address"
                @click="routerTo('/user/address')"
                >收货地址</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-document"></i>
              <span>订单中心</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                index="/user/orderList"
                @click="routerTo('/user/orderList')"
              >
                我的订单
              </el-menu-item>
              <el-menu-item
                index="/user/comment"
                @click="routerTo('/user/comment')"
                >评价晒单</el-menu-item
              >
              <!--我的订单 评价晒单 -->
            </el-menu-item-group>
          </el-submenu>
          <!-- <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-phone-outline"></i>
              <span>售后服务</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="3-1">服务记录</el-menu-item>
              <el-menu-item index="3-2">申请服务</el-menu-item>
            </el-menu-item-group>
          </el-submenu> -->
          <!-- <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span>账户管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="4-1">个人信息</el-menu-item>
              <el-menu-item index="4-2">修改密码</el-menu-item>
            </el-menu-item-group>
          </el-submenu> -->
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "UserMenu",
  methods: {
    routerTo(url) {
      if (url === "/user/orderList") {
        this.$store.commit("changeOrderListActiveName", "first");
      }
      this.$router.push(url).catch((err) => err);
    },
  },
};
</script>

<style scoped>
.user-menu {
  width: 260px;
  float: left;
}
.user-menu /deep/ .el-menu-item-group__title {
  padding: 0;
}
</style>